<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引包 -->
    <script src="../js/vue.js"></script>
</head>

<body>
    <!-- 容器|模板 -->
    <div id="app">
        <button @click="add">点击我加上1</button>
        <span ref="cur">{{count}}</span>
        <button @click="minus">点击我减去1</button>
        <button @click="handler">销毁VM</button>
    </div>
</body>

</html>
<script>
    //关联VM
    const VM = new Vue({
        el: '#app',
        data: {
            count: 1
        },
        methods: {
            //+1按钮的回调
            add() {
                this.count++
            },
            //-1按钮的回调
            minus() {
                this.count--;
            },
            //销毁按钮的回调
            handler(){
                //销毁VM的方法 $destroy是原型方法
                this.$destroy();
            }
        }
        ,
        //生命周期函数:全部的生命周期函数中最先执行的beforeCreate钩子函数
        //VM完整的初始化未完毕
        beforeCreate() {
            //这个钩子this->VM(初始化配置还未完毕),在这里获取不到VM属性|方法
            console.log('初始化阶段:beforeCreate', 'VM未完成初始化');
        },
        //VM初始化完毕了
        created() {
            //VM初始化完毕,可以获取属性、方法等等可以获取到了
            console.log('初始化阶段:created', 'VM初始化完毕', this.count);
        },
        //VM挂载之前会执行一次
        beforeMount() {
            //this->VM
            //当前钩子可以获取VM属性、方法，获取不到真实DOM节点.
            console.log('初始化阶段:beforeMount', 'VM挂载之前执行一次', this.count);
        }
        ,
        //VM挂载完毕了*****
        //mounted是比较重要的一个钩子函数,咱们以后比如发请求axios.get|axios.post|axios({})都在这里书写
        mounted() {
            console.log('初始化阶段:mounted', 'VM挂载完毕', this.$refs.cur);
        }
        ,
        //更新阶段:当VM的响应式的数据发生变化的时候会触发一次
        beforeUpdate() {
            console.log('更新阶段:beforeUpdate',this.count);
        }
        ,
        //更新阶段:当VM的响应式数据发生变化之后触发一次
        updated(){
           console.log('更新阶段:updated',this.count);
        }
        ,
        //VM销毁之前
        beforeDestroy(){
           //this->VM
           console.log('销毁阶段beforeDestroy')
        }
        ,
        //VM销毁完毕:处理后事，比如前面开启定时器、销毁时候清清除定时器！！！
        destroyed(){
          console.log('销毁阶段destroyed');
        }
    });

     //Vue生命周期函数
     //初始化阶段:beforeCreate、created、beforeMount、mounted--->会执行一次
     //更新阶段:beforeUpdate、updated->当VM的响应式的数据发生变化的时候,会执行
     //销毁阶段: beforeDestroy、destroyed！！！！！
     //VM销毁并不是说，视图看不见了,VM还是可以访问到，但是它'不工作了'！！！！

</script>